<!--
 * @Author: 赵成刚-司机资料详情
-->

<template>
  <view class="driverinformation-box">
    <u-form
      :model="form"
      :label-width="240">
      <view class="u-flex top-box">
        <u-form-item
          label="身份证正页"
          :label-width="160"
          class="top-img-box"
          :label-position="'top'">
          <image
            class="img-box"
            :src="form.idcardFrontPhoto"
            alt=""
            @click="previewImageF(form.idcardFrontPhoto)" />
        </u-form-item>
        <u-form-item
          label="身份证反页"
          :label-width="160"
          class="top-img-box"
          :label-position="'top'">
          <image
            class="img-box"
            :src="form.idcardBackPhoto"
            alt=""
            @click="previewImageF(form.idcardBackPhoto)" />
        </u-form-item>
      </view>
      <u-form-item
        label="姓名"
        class="form-item-box">
        <u-input
          v-model="form.driverName"
          disabled />
      </u-form-item>
      <u-form-item
        label="身份证号"
        class="form-item-box">
        <u-input
          v-model="form.idcard"
          disabled />
      </u-form-item>
      <u-form-item
        label="手机号码"
        class="form-item-box">
        <u-input
          v-model="form.driverPhone"
          disabled />
      </u-form-item>
      <u-form-item label="驾驶证">
        <image
          class="img-box"
          :src="form.driverLicense"
          alt=""
          @click="previewImageF(form.driverLicense)" />
      </u-form-item>
    </u-form>
  </view>
</template>
<script>
export default {
  data() {
    return {
      form: {
        driverName: undefined, //司机姓名
        driverPhone: undefined, //手机号
        idcard: undefined, //身份证号
        driverLicense: undefined, //驾驶证
        idcardFrontPhoto: undefined, //身份证正面
        idcardBackPhoto: undefined //身份证反面
      }
    }
  },
  mounted() {
    this.getDataList()
  },
  methods: {
    //图片预览大图
    previewImageF(val) {
      uni.previewImage({
        current: '', // 当前显示图片的 http 链接
        urls: [val] // 需要预览的图片 http 链接列表
      })
    },
    //根据登录用户查询司机信息
    async getDataList() {
      const { code, result, message } = await this.$u.get(
        '/freight-business/driver/info'
      )
      console.log('根据登录用户查询司机信息', code)
      if (code === '0') {
        console.log('根据登录用户查询司机信息', result)
        // 身份证正面
        result.idcardFrontPhoto =
          'https://lygminio.tzszxx.com/freight-control-platform/' +
          result.idcardFrontPhoto
        // 身份证反面
        result.idcardBackPhoto =
          'https://lygminio.tzszxx.com/freight-control-platform/' +
          result.idcardBackPhoto
        //驾照
        result.driverLicense =
          'https://lygminio.tzszxx.com/app/' + result.driverLicense
        this.form = result
      } else {
        this.$api.msg(message)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.driverinformation-box {
  margin: 0 16rpx;
  .top-box {
    width: 100%;
    .top-img-box {
      width: 50%;
    }
  }
  .img-box {
    width: 200rpx;
    height: 200rpx;
  }
}
</style>
